<template>
	<view class="container">
		<view class="myInfo_header">
			<uni-nav-bar left-icon="left" @clickLeft="back" :border="false" :background-color="transparentColor" dark status-bar title="个人信息" style="position: fixed; top: 0; left: 0; right: 0; z-index: 999;" />
		</view>
		<!-- 个人信息区域 -->
		<view class="myInfo_contain">
			<view class="myInfo_contain_main">
				<!-- 头像区域 -->
				<view class="myInfo_contain_main_avatar">
					<view class="discount_coupon_containt_myInfo_my">
						头像
					</view>
					<navigator url="/pacakgeMy/pages/editInfo/editInfo" class="discount_coupon_containt_myInfo_count">
						<img src="/static/客服@2x.png"/>
						<uni-icons type="right" color="#949494" size="18" style="vertical-align: middle;margin-top: -3rpx;"></uni-icons>
					</navigator>
				</view>
				<!-- 姓名区域 -->
				<view class="myInfo_contain_main_center">
					<view class="myInfo_contain_main_center_one">
						姓名
					</view>
					<view class="myInfo_contain_main_center_two">
						张先生
					</view>
				</view>
				<!-- 电话区域 -->
				<view class="myInfo_contain_main_bottom">
					<view class="myInfo_contain_main_bottom_left">
						电话
					</view>
					<navigator url="/pacakgeMy/pages/editPhone/editPhone" class="myInfo_contain_main_bottom_right">
						15023457896
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				transparentColor: '#2D81F9' ,// 将顶部导航栏的颜色设为透明
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
.container {
	background-color: #F7F7F7;
	font-size: 30rpx
}
/* 顶部导航栏区域开始 */
.myInfo_header {
	height: 300rpx;
	background-image: linear-gradient(to bottom, #3789FF, #0863E5);
}
/* .uni-nav-bar {
	border-bottom: none;
} */
/* 顶部导航栏区域结束 */

/* 主体信息区域开始 */
.myInfo_contain {
	padding: 0 20rpx;
	position: relative;
	top: -160rpx;
}
.myInfo_contain_main {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 10rpx 30rpx;
}
.myInfo_contain_main_avatar {
	height: 88rpx;
	line-height: 88rpx;
	display: flex;
	justify-content: space-between;
	padding: 30rpx 0;
	border-bottom: 6rpx solid #F7F7F7;
}
.myInfo_contain_main_center {
	display: flex;
	justify-content: space-between;
	padding: 30rpx 0;
	border-bottom: 6rpx solid #F7F7F7;
}
.myInfo_contain_main_bottom {
	display: flex;
	justify-content: space-between;
	padding: 30rpx 0;
}
.discount_coupon_containt_myInfo_count>img {
	width: 80rpx;
	height: 80rpx;
	vertical-align: middle;
	border-radius: 40rpx;
}
/* 主体信息区域结束 */
</style>
